<style type="text/css">
    .el-input__inner {
        padding: 0 6px;
    }
</style>
<!--服务方管理-->
<template>
    <div>
        <el-row class="toolbar">
            <el-col :span="23" class="marginTop20px" id="serachId">
                <el-form :model="conditionForm" ref="conditionFormRef">
                    <el-button type="primary" size="small" @click="dialogFormVisible = true" style="float:left" v-if="isShow('provide-add')">注册</el-button>
                    <el-form-item style="float:right;margin-right: 30px;margin-left:15px;">
                        <el-button type="primary" @click="onSearch" size="small">&nbsp;搜索</el-button>
                    </el-form-item>
                    <el-form-item style="float:right;margin-right: 10px;width:120px;">
                        <el-select v-model="conditionForm.status" placeholder="请选择" size="small">
                            <el-option label="待审核" value="0"></el-option>
                            <el-option label="审核通过" value="3"></el-option>
                            <el-option label="审核不通过" value="4"></el-option>
                            <el-option label="全部" value=""></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item style="float:right;margin-right: 15px; width:120px;">
                        <el-input v-model="conditionForm.serialNo" size="small" placeholder="服务提供商标识"></el-input>
                    </el-form-item>
                    <el-form-item style="float:right;margin-right: 15px; width:120px;">
                        <el-input v-model="conditionForm.provider" size="small" placeholder="服务提供商名称"></el-input>
                    </el-form-item>
                    <el-form-item style="float:right;margin-right: 15px; width:120px;">
                        <el-input v-model="conditionForm.contactsTel" size="small" placeholder="联系电话"></el-input>
                    </el-form-item>
                    <el-form-item style="float:right;margin-right: 15px; width:120px;" >
                        <el-input v-model="conditionForm.contacts" size="small" placeholder="联系人"></el-input>
                    </el-form-item>
                    <!-- <el-form-item style="float:right;margin-right: 15px;">
                        <el-input v-model="conditionForm.keyword" auto-complete="off" placeholder="关键字" @keyup.enter.native="onSearch"></el-input>
                    </el-form-item>
                    <el-form-item style="float:right;margin-right: 15px;">
                        <el-select v-model="conditionForm.searchType" placeholder="请选择">
                            <el-option v-for="item in searchTypeOptions" :key="item.value" :label="item.label"
                                    :value="item.value"></el-option>
                        </el-select>
                    </el-form-item> -->
                </el-form>
            </el-col>
        </el-row>
        <el-row class="marginTop20px toolbar">
            <el-col :span="23" class="titleLineSymbolTwo">
                <el-table :data="resultDate.data.list" stripe style="width: 100%">
                    <el-table-column style="width:40px;" type="index"  label="序号" ></el-table-column>
                    <el-table-column prop="serialNo" label="服务提供商标识"></el-table-column>
                    <el-table-column prop="provider" label="服务提供商名字"></el-table-column>
                    <el-table-column prop="apiNum" label="接口总数"></el-table-column>
                    <el-table-column prop="createTime" label="注册时间" :formatter="formatCommDatasNotSecond" min-width="120"></el-table-column>
                    <el-table-column prop="contacts" label="联系人"></el-table-column>
                    <el-table-column prop="contactsTel" label="联系电话" min-width="120"></el-table-column>
                    <el-table-column prop="isDel" label="是否删除" :formatter="formatCommDatas"></el-table-column>
                    <el-table-column prop="status" label="状态">
                        <template scope="scope">
                            <span v-html="formatDicTionary(scope.row.status,'status_type')"></span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建时间" :formatter="formatCommDatasNotSecond" min-width="120"></el-table-column>
                    <el-table-column label="操作" fixed="right" class="textCenter" min-width="150">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" v-if="isShow('provide-edit') && isShowEditOrDelete(scope.row.status,'editDel')" @click="showUpdateForm(scope.$index, scope.row)">编辑</el-button>
                            <el-button type="text" size="small" v-if="isShow('provide-resubmit') && isShowEditOrDelete(scope.row.status,'resubmit')" @click="resubmit(scope.$index, scope.row, 'updateFormRef')">重新提交</el-button>
                            <el-button type="text" size="small" v-if="isShow('provide-delete') && isShowEditOrDelete(scope.row.status,'editDel')" @click="handleDel(scope.$index, scope.row)">删除</el-button>
                            <el-button type="text" size="small" v-if="isShow('provide-viewDetails')" @click="showViewDetails(scope.$index, scope.row)">查看详情</el-button>
                            <el-button type="text" size="small" @click="serverInformation(scope.$index, scope.row)">服务器</el-button>
                            <el-button type="text" size="small" v-if="isShow('provide-pass') && isShowCheck1(scope.row.status,'pass')" @click="audit(scope.row,'yes')">审核通过</el-button>
                            <el-button type="text" size="small" v-if="isShow('provide-noPass') && isShowCheck1(scope.row.status,'noPass')" @click="audit(scope.row,'no')">审核不通过</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
            <el-col :span="23" class=" marginTop10px">
                <el-pagination layout="total, prev, pager, next, jumper" @current-change="handleCurrentPageChange"
                            :current-page="resultDate.data.pageNum"
                            :page-size="resultDate.data.pageSize" :total="resultDate.data.total">
                </el-pagination>
            </el-col>

            <!--新增界面-->
            <!-- <el-dialog title="新增服务方" :visible.sync="dialogFormVisible" width="50%" :before-close="handleClose" :modal-append-to-body="false"> -->
            <Modal v-model="dialogFormVisible" title="新增服务方" width='50%' :before-close="handleClose">
                <el-card>
                <el-form :model="addForm" ref="addFormRef" :rules="frormRules">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="服务提供商标识" :label-width="formLabelWidth" prop="serialNo">
                                <el-input v-model="addForm.serialNo" auto-complete="off" ></el-input>
                        </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="服务提供商名字" :label-width="formLabelWidth" prop="provider">
                                <el-input v-model="addForm.provider" auto-complete="off"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="联系人" :label-width="formLabelWidth" prop="contacts">
                                <el-input v-model="addForm.contacts" auto-complete="off"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="联系电话" :label-width="formLabelWidth" prop="contactsTel">
                                <el-input v-model="addForm.contactsTel" auto-complete="off"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <!---                                       隐藏 start                                                            --->
                    <!--<el-row>-->
                        <!--<el-col :span="12">-->
                            <!--<el-form-item label="开发者用户标识" :label-width="formLabelWidth" prop="devId">-->
                                <!--<el-select v-model="addForm.devId" placeholder="请选择">-->
                                    <!--<el-option v-for="item in userData" :key="item.id" :label="item.name"-->
                                            <!--:value="item.userId"></el-option>-->
                                <!--</el-select>-->
                            <!--</el-form-item>-->
                        <!--</el-col>-->
                    <!--</el-row>-->
                    <!---                                       隐藏 end                                                            --->
                </el-form>
                </el-card>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="submitForm('addFormRef')">确 定</el-button>
                </div>
            </Modal>
            <!-- </el-dialog> -->


            <!--编辑界面-->
            <!-- <el-dialog title="编辑服务方" :visible.sync="updateFormVisible" width="50%" :before-close="handleClose" :modal-append-to-body="false"> -->
            <Modal v-model="updateFormVisible" title="编辑服务方" width='50%' :before-close="handleClose">
                <el-card>
                <el-form :model="updateForm" ref="updateFormRef" :rules="frormRules">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="服务提供商标识" :label-width="formLabelWidth" prop="serialNo">
                                <el-input v-model="updateForm.serialNo" auto-complete="off" ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="服务提供商名字" :label-width="formLabelWidth" prop="provider">
                                <el-input v-model="updateForm.provider" auto-complete="off"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="联系人" :label-width="formLabelWidth" prop="contacts">
                                <el-input v-model="updateForm.contacts" auto-complete="off"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="联系电话" :label-width="formLabelWidth" prop="contactsTel">
                                <el-input v-model="updateForm.contactsTel" auto-complete="off"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <!---                                       隐藏 start                                                            --->
                    <!--<el-row>-->
                        <!--<el-col :span="12">-->
                            <!--<el-form-item label="开发者用户标识" :label-width="formLabelWidth" prop="devId">-->
                                <!--<el-select v-model="updateForm.devId" placeholder="请选择">-->
                                    <!--<el-option v-for="item in userData" :key="item.id" :label="item.name"-->
                                            <!--:value="item.userId"></el-option>-->
                                <!--</el-select>-->
                            <!--</el-form-item>-->
                        <!--</el-col>-->
                    <!--</el-row>-->
                    <!---                                       隐藏 end                                                            --->
                </el-form>
                </el-card>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="updateFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="doUpdate('updateFormRef')">确 定</el-button>
                </div>
            </Modal>
            <!-- </el-dialog> -->

            <Modal v-model="detailsVisible" title="查看详情" width='50%' :before-close="handleClose">
                <el-card>
                <el-form :model="updateForm" ref="updateFormRef" :rules="frormRules">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="服务提供商标识" :label-width="formLabelWidth" prop="serialNo">
                                <el-input v-model="updateForm.serialNo" auto-complete="off" :disabled="true"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="服务提供商名字" :label-width="formLabelWidth" prop="provider">
                                <el-input v-model="updateForm.provider" auto-complete="off" :disabled="true"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="联系人" :label-width="formLabelWidth" prop="contacts">
                                <el-input v-model="updateForm.contacts" auto-complete="off" :disabled="true"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="联系电话" :label-width="formLabelWidth" prop="contactsTel">
                                <el-input v-model="updateForm.contactsTel" auto-complete="off" :disabled="true"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="开发者用户标识" :label-width="formLabelWidth" prop="devId">
                                <el-select v-model="updateForm.devId" placeholder="请选择" :disabled="true">
                                    <el-option v-for="item in userData" :key="item.id" :label="item.name"
                                            :value="item.userId"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                </el-card>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="detailsVisible = false">关 闭</el-button>
                </div>
            </Modal>

            <Modal v-model="serverInformationVisible" title="服务器列表信息" width='50%' :before-close="handleClose">
                <el-row>
                    <el-col>
                        <el-button @click="serverInformationAdd = true">新 增</el-button>
                    </el-col>
                    <el-col :span="24">
                        <el-table :data="serverInformationData.data.list" stripe style="width: 100%">
                            <el-table-column type="index" label="序号"></el-table-column>
                            <el-table-column prop="hostSerialNo" label="服务器标识"></el-table-column>
                            <el-table-column prop="hostName" label="服务器名字"></el-table-column>
                            <el-table-column prop="hostIp" label="服务器地址"></el-table-column>
                            <el-table-column prop="providerSerialNo" label="提供者标识"></el-table-column>
                        </el-table>
                    </el-col>
                    <el-col :span="24" class="toolbar">
                        <el-pagination layout="total, prev, pager, next, jumper" @current-change="handleCurrentPageChange"
                                    :current-page="serverInformationData.data.pageNum"
                                    :page-size="serverInformationData.data.pageSize" :total="serverInformationData.data.total">
                        </el-pagination>
                    </el-col>
                </el-row>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="serverInformationVisible = false">关 闭</el-button>
                </div>
            </Modal>

            <Modal v-model="serverInformationAdd" title="服务器信息添加" width='50%' :before-close="handleClose">
                <el-card>
                <el-form :model="serverInformationForm" ref="serverInformationFormRef" :rules="frormRules">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="服务器名字" :label-width="formLabelWidth" prop="hostName">
                                <el-input v-model="serverInformationForm.hostName" auto-complete="off"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="服务器地址" :label-width="formLabelWidth" prop="hostIp">
                                <el-input v-model="serverInformationForm.hostIp" auto-complete="off"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                </el-card>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="serverInformationAdd = false">取 消</el-button>
                    <el-button type="primary" @click="serverInformationSubmit('serverInformationFormRef')">确 定</el-button>
                </div>
            </Modal>
        </el-row>    
    </div>
</template>

<script>

    import {pro_add, pro_del, 
            pro_searchByCondition, 
            pro_update, 
            req_seachUserByCurrent, 
            pro_serverInformationSearch, 
            pro_serverInformationAdd} from '../api/api.js';
    import utils from '../api/utils.js';

    export default {
        data() {
            return {
                userData:[],
                resultDate: {data:{total:0, pageNum: 0}},// 列表数据对象
                formLabelWidth: '120px',// 新增界面label大小
                addForm: {},//新增界面数据
                dialogFormVisible: false,//新增界面是否显示
                frormRules: { // 界面校验规则
                    serialNo: [
                        { required: true, message: '请输入唯一标识', trigger: 'blur' }
                    ],
                    provider: [
                        { required: true, message: '请输入服务提供商名字', trigger: 'blur' }
                    ],
                    contacts: [
                        { required: true, message: '请输入联系人名称', trigger: 'blur' }
                    ],
                    contactsTel: [
                        { required: true, message: '请输入联系人电话', trigger: 'blur' }
                    ],
                    hostName: [
                        { required: true, message: '请输入服务器名字', trigger: 'blur' }
                    ],
                    hostIp: [
                        { required: true, message: '请输入服务器地址', trigger: 'blur' }
                    ]
                },
                updateForm:{},// ---------  更新
                updateFormVisible:false,
                conditionForm: {status:"0" ,serialNo:"", provider:"", contacts:"", contactsTel:"", searchType: "", keyword: "", pageSize: 5},
                searchTypeOptions: [{
                    value: 'provider',
                    label: '提供商名字'
                }, {
                    value: 'serialNo',
                    label: '接口标识'
                }, {
                    value: 'contacts',
                    label: '联系人'
                }, {
                    value: 'contactsTel',
                    label: '联系人号码'
                }, {
                    value: 'all',
                    label: '全部',
                }],
                detailsVisible: false,

                serverInformationData: {data:{total:0, pageNum: 0}},
                serverInformationVisible: false,
                serverInformationForm: {},
                serverInformationAdd: false,
                providerSerialNo: "",
            };
        },
        methods: {
            isShow: function (resource) { //资源权限管理
                return utils.apiResourcePermissions(resource);
            },
            isShowEditOrDelete: function (status,type) { //资源权限管理 根据审核情况是否显示（编辑/删除）
                return utils.apiIsShowEditOrDelete(status,this.roleId,type);
            },
            isShowCheck1: function(status,type){ // 资源权限管理 根据审核情况是否显示（审核）
                return utils.apiIsShowCheck(status,this.roleId,type);
            },
            handleCurrentPageChange: function (currentPage) {// 翻页动作
                this.currentPage = currentPage;
                this.onSearch();// 翻页后刷新页面数据
            },
            handleClose(done) { // 新增界面关闭事件
                this.$confirm('确认关闭？',"提示").then(_ => {done();}).catch(_ => {});
            },
            seachUserByCurrent(){
                let roleId = "";
                if(utils.isEmpty(localStorage.apiPermission)){
                    return;
                }
                let arr = JSON.parse(localStorage.apiPermission);
                arr.forEach(obj => {
                    roleId = obj.roleId;
                    return
                });
                this.roleId = roleId;
                let params = {
                    roleId: roleId
                };
                req_seachUserByCurrent(params)
                    .then(res => {
                        this.userData = res.data.data;
                    }).catch(function (error) {
                    console.log(error);
                    _this.$message.warning('系统异常 ');
                });
            },
            submitForm(formName) { // 新增界面提交事件
                let params = Object.assign({}, this.$refs[formName]._props.model);
                params.status = 1;
                console.log(params);
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            pro_add(params).then(res=>{
                                console.log(res.data.msg);
                                this.$message.success(res.data.msg);
                                if(res.data.code=='S100101'){
                                    this.addForm = {};
                                    this.onSearch();
                                }
                            }).catch(err=>{
                                this.$message.error("系统异常");
                                console.log(err);
                            });
                            this.dialogFormVisible = false;
                        });
                    }
                });
            },
            // 查询
            onSearch(){  // 发出列表请求，并更新当前页面数据
                var _this = this
                _this.conditionForm.pageNum=_this.currentPage;
                _this.conditionForm.roleId = _this.roleId;
                pro_searchByCondition(_this.conditionForm)
                    .then(res => {
                        _this.resultDate = res.data;
                        console.log(res.data.data.list);
                    }).catch(function (error) {
                        console.log(error);
                        this.$message.warning('系统异常 ');
                    });
            },
            //删除
            handleDel (index, row) { // 数据项删除操作
                this.$confirm('是否删除当前该记录?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    pro_del(row.id).then((res) => {
                        if(res.data.code=='S100101'){
                            this.$message.success('删除成功!');
                            this.onSearch();
                        }else{
                            this.$message.warning('删除失败! '+res.data.msg);
                            this.onSearch();
                        }
                    }).catch((res) => {
                        this.$message.error('删除失败!');
                    });
                })
            },
            showUpdateForm(index, row){
                this.updateForm={};
                this.updateFormVisible = true;
                this.updateForm = Object.assign({}, row);
            },
            showViewDetails(index, row){
                this.updateForm = {};
                this.detailsVisible = true;
                this.updateForm = Object.assign({}, row);
            },
            doUpdate(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            pro_update(this.updateForm).then((res) => {
                                if(res.data.code=='S100101'){
                                    this.$message.success('更新成功!');this.onSearch();
                                }else{
                                    this.$message.warning('更新失败! '+res.data.msg);this.onSearch();
                                }
                            }).catch((res) => {
                                this.$message.error('更新失败!');
                            });
                            this.updateFormVisible = false;
                        });
                    }
                });
            },
            resubmit(index, row, formName){
                let _this = this
                this.updateForm = Object.assign({}, row);
                this.updateForm.status = 2;
                pro_update(this.updateForm).then((res) => {
                    if (res.data.code == 'S100101') {
                        _this.$message.success('重新提交成功!');
                        _this.onSearch();
                    } else {
                        _this.$message.warning('重新提交失败! ' + res.data.msg);
                        _this.onSearch();
                    }
                }).catch((err) => {
                    _this.$message.error('重新提交失败!');
                });
            },
            serverInformation(index, row){
                this.providerSerialNo = row.serialNo;
                let params = {
                    providerSerialNo: row.serialNo
                }
                pro_serverInformationSearch(params).then(res => {
                    this.serverInformationData = res.data;
                    this.serverInformationVisible = true;
                }).catch(function (error) {
                    console.log(error);
                    this.$message.warning('系统异常 ');
                });
            },
            serverInformationSubmit(formName){
                let _this = this;
                let params = Object.assign({}, this.$refs[formName]._props.model);
                params.providerSerialNo = this.providerSerialNo;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            pro_serverInformationAdd(params).then(res=>{
                                this.$message.success(res.data.msg);
                                if(res.data.code=='S100101'){
                                    _this.addForm = {};
                                    _this.serverInformation(0,{serialNo:_this.providerSerialNo});
                                }
                            }).catch(err=>{
                                this.$message.error("系统异常");
                                console.log(err);
                            });
                            this.serverInformationAdd = false;
                        });
                    }
                });
            },
            audit(row,yesOrNo){
                var _this = this
                let status ;
                if(yesOrNo=='yes'){
                    status=3;
                }else if(yesOrNo=='no'){
                    status=4
                }else{_this.$message.error("异常操作!!!");return false;}

                this.updateForm = Object.assign({}, row);
                this.updateForm.status = status;
                pro_update(this.updateForm).then((res) => {
                    if (res.data.code == 'S100101') {
                        _this.$message.success(res.data.msg);
                        _this.onSearch();
                    } else {
                        _this.$message.warning('审核失败! ' + res.data.msg);
                        _this.onSearch();
                    }
                }).catch((err) => {
                    _this.$message.error('审核失败!');
                });

            },
            formatCommDatas(row, column){
                return utils.formatCommDatas(row,column);
            },
            formatCommDatasNotSecond(row, column){
                return utils.formatCommDatasNotSecond(row,column);
            },
            formatDicTionary(value,type){
                return utils.formatDicTionary(value,type);
            },
        },
        computed: {

        },
        created() {

        },
        mounted(){
            this.seachUserByCurrent();
            this.onSearch();
            
        }
    };

    const trNumber = document.getElementsByClassName('el-table_1_column_1')[0];
    setTimeout(()=>{
        trNumber.style.width = '40px';
        console.log(trNumber.innerHTML);
    },50);
</script>


